<template>
  <f7-page @page:afterin="init">
    <f7-navbar :title="$t('m.tabs.information')" back-link=" "></f7-navbar>
    <div class="news-banner">
      <f7-swiper pagination :params="swiperParams">
        <f7-swiper-slide v-for="(item, index) in banners" :key="index">
          <img :src="item.pic" alt="">
        </f7-swiper-slide>
      </f7-swiper>
    </div>

    <ul class="news-list">
      <li v-for="(item, index) in articleList" :key="index">
        <f7-link @click="viewArticle(item)">
          <img :src="item.pic || require('../static/avatar.jpg')" alt="">
          <div>
            <div>
              <h3>{{item.title}}</h3>
              <p>{{$moment(item.add_time * 1000).format('YYYY-MM-DD')}}<span>Wang MR</span> <i class="iconfont icon-yanjing"></i>{{item.view}}{{$t('m.person')}}</p>
            </div>
          </div>
        </f7-link>
      </li>
    </ul>
  </f7-page>
</template>

<script>
  import {getArticles, getBanners} from "../api/my";

  export default {
    name: "news",
    data () {
      return {
        swiperParams: {
          observer: true,
          observeParents: true,
          autoplay: {
            delay: 3000
          }
        },
        articleList: [],
        banners: []
      }
    },
    methods: {
      init() {
        getArticles({type: 1}).then(res => {
          this.articleList = res.data;
        })
        getBanners({type: 2}).then(res => {
          this.banners = res.data;
        })
      },
      viewArticle(article) {
        this.$f7router.navigate('/article-details/', {context: {id: article.id}});
      }
    }
  }
</script>

<style scoped lang="scss">
  .news-banner {
    height: 350px;
  }
  .news-list {
    background: #fff;
    padding: $padding;
    li {
      margin-bottom: $padding;
      .link {
        display: flex;
        height: 180px;
        img {
          width: 180px;
          height: 180px;
          margin-right: $padding20;
        }
        > div {
          flex: 1;
          height: 100%;
          > div {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
          h3 {
            color: #000;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          p {
            color: $colorGrey;
            span {
              margin: 0 50px 0 20px;
            }
            .iconfont {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
</style>
